<template>
  <el-drawer
    :title="isCreate?'添加主备分组':'编辑主备分组'"
    :visible.sync="drawerVisible"
    :size="'600px'"
    custom-class="data-element-drawer"
  >
    <div class="drawer-body">
      <el-form ref="dataForm" :rules="modelRules" :model="redundancyModel" label-width="180px">
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="redundancyModel.name" placeholder="分组名称"/>
        </el-form-item>
        <el-form-item label="主网关" prop="activeGatewayId">
          <el-select v-if="gateways.length" v-model="redundancyModel.activeGatewayId" :disabled="!isCreate" placeholder="请选择">
            <el-option
              v-for="item in gateways"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备网关" prop="stdbyGatewayId">
          <el-select v-if="gateways.length" v-model="redundancyModel.stdbyGatewayId" placeholder="请选择">
            <el-option
              v-for="item in gateways"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import {
    updateRedundancy,
    createRedundancy,
    getRedundancyById
  } from "@/api/redundancy";
  import { getGatewayShortest } from "@/api/gateway";

  export default {
    props: {},
    data() {
      return {
        gateways: [],
        redundancyModel: {},
        drawerVisible: false,
        isSubmitLoading: false,
        isCreate: false,
        modelRules: {
          name: [{ required: true, trigger: "blur", message: "请输入主备分组名称" }],
          activeGatewayId: [{ required: true, trigger: "change", message: "请选择主网关" }],
          stdbyGatewayId: [{ required: true, trigger: "change", message: "请选择备网关" }]
        }
      };
    },
    watch: {},
    created() {
      this.getGatewayShortest();
    },
    mounted() {},
    methods: {
      show(id) {
        this.resetModal();
        this.isSubmitLoading = false;
        if (id) {
          this.redundancyModel.id = id;
          this.getRedundancyById();
          this.isCreate = false;
        } else {
          this.isCreate = true;
        }
        this.drawerVisible = true;
      },
      getRedundancyById() {
        this.isSubmitLoading = true;
        getRedundancyById(this.redundancyModel.id).then(result => {
          this.redundancyModel = result;
          this.isSubmitLoading = false;
        });
      },
      getGatewayShortest() {
        this.isSubmitLoading = true;
        getGatewayShortest().then(result => {
          this.gateways = result;
          this.isSubmitLoading = false;
        });
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        })
      },
      resetModal() {
        this.redundancyModel = {};
        this.clearValidate();
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            //
            if (this.isCreate) {
              createRedundancy(this.redundancyModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            } else {
              updateRedundancy(this.redundancyModel)
                .then(() => {
                  this.success();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            }
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      success() {
        this.$message({
          message: this.isCreate ? "添加成功" : "编辑成功",
          type: "success"
        });
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        this.close();
        this.$emit("save", this.isCreate);
      },
      close() {
        this.drawerVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;

      .el-input {
        max-width: 360px;
      }

      .el-select {
        width: 360px;
      }
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

  .static-text {
    display: inline-block;
  }

  .tips-text {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    color: #999999;
  }
</style>
